<template>
    <div style="z-index: 1000;width: 100%">
        <div>
            <div style="width:500px;height:500px;margin: 0 auto;padding-top: 200px">
                <el-form>
                    <el-form-item label="输入用户名：">
                        <el-input v-model="loginMessage.username"></el-input>
                    </el-form-item>
                    <el-form-item label="输入密码：">
                        <el-input v-model="loginMessage.password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="mini" @click="login">登录</el-button>
                <el-button type="primary" size="mini" @click="dialogVisible=true">注册</el-button>
            </div>
        </div>
        <el-dialog
                title="注册"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form>
                <el-form-item label="输入用户名：">
                    <el-input v-model=" registerMessage.username"></el-input>
                </el-form-item>
                <el-form-item label="输入密码：">
                    <el-input v-model=" registerMessage.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="邮箱：">
                    <el-input v-model=" registerMessage.email"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="register">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios"
    import cookies from 'js-cookie'
    export default {
        name: "Login",
        data(){
            return{
                loginMessage:{
                    username:'',
                    password:''
                },
                dialogVisible:false,
                registerMessage:{
                    username:'',
                    password:'',
                    email:'',
                },
            }
        },
        methods:{
            async login(){
                axios.post('http://localhost:5000/login',this.loginMessage).then(res=>{
                    let type=res.data.type
                    let user_name=res.data.username
                    cookies.set('type',type)
                    cookies.set('userName',user_name)
                    if(type==0||type==1){
                        this.$router.push('/admin')
                    }
                })
            },
            async register(){
                axios.post('http://localhost:5000/register',
                    {
                        ...this.registerMessage,
                    }).then(res=>{
                    if(res.data.code)
                        alert(res.data.message)
                })
            }
        }
    }
</script>

<style scoped>

</style>
